<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>

        <ion-title>{{ ($route.params.id as string).replace("dc","") }} </ion-title> 
        <ion-buttons v-if(wordlist) slot="end">
          <ion-button @click="$router.back()" fill="solid" color="primary">
            <ion-icon :icon="caretBackCircle"  size="large"></ion-icon> BACK
          </ion-button>
          <ion-button @click="gotoNext" fill="solid" color="primary">
            <ion-icon :icon="caretForwardCircle" size="large"></ion-icon> NEXT
          </ion-button>
        </ion-buttons>

      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <div id="container">
        <!-- <strong> {{ $route.params.id }} </strong> -->
        
        <ol v-if="wordlist">
            <li v-for="word in wordlist" :key="word" >
              <span>&nbsp;|&nbsp;  <a @click="wordclick(word)">{{ word?.word }} </a>  &nbsp;&nbsp; </span> 
              <span class="mean_cn" v-if="word?.$1==1" > {{ word?.mean_cn }} 
              <a :href="'http://www.eudic.cn/dicts/en/'+word?.word" >({{ word?.word }})</a>
              </span> 
            </li>
        </ol>
        <div v-else>
            <h1>Enjoy your getting words!</h1>
            <p>Please select a course from the list.</p>
            <img src="/cover.jpg" alt="cover" @click="$router.push('/folder/dc1130')"/>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { computed,  reactive } from 'vue';
import { IonIcon } from '@ionic/vue';
import { caretBackCircle,caretForwardCircle } from 'ionicons/icons';


import { useRoute } from 'vue-router';
import {dclist} from '../data/dcobj';
import { useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const listAll = reactive(dclist);
const wordlist = computed(() => listAll[route.params.id]);
function wordclick(word:any){
  word.$1=(typeof(word?.$1)=="undefined" || word?.$1==0)?1:0;
  console.log(word);
}

function gotoNext(){
  const keys = Object.keys(listAll);
  const idx = keys.findIndex((item:any)=>item==route.params.id);
  if(idx<keys.length-1){
    router.push(`/folder/${keys[idx+1]}`);
  }
}
</script>

<style scoped>
#container {
  
  padding:20px;
  
  /* text-align: center; */
  position: absolute;
  left: 0;
  right: 0;
  /* top: 50%; */
  /* transform: translateY(-50%); */
  font-size:20px;
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

span.mean_cn {
  font-size: 14px;
  color: #8c8c8c;
}
</style>
